<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="doc.master" %> <%@ Register TagPrefix="mod" TagName="inline" Src="/Mod/Mod_Inline.ascx" %> <asp:Content ID="Content1" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1"> <h1>Bilder</h1> <p>Publikation von Bildern im Internet erfordert eine vorherige Bearbeitung der Bilder. Meist benötigt man die Bilder in 3 Größen:</p> <ul> <li>Original</li> <li>Bildschirmgröße</li> <li>Vorschaugröße (Thumbnail)</li> </ul> <p>Expression Web unterstützt nur die Herstellung von Vorschaubildern aber erlaubt nicht die Verkleinerung auf eine andere Größe.</p> <h2>Bild einfügen</h2> <p>Zuerst das Bild aus seinem aktuellen Speicherort im Dateisystem in die Siteansicht von Expression Web kopieren (immer im Rahmen von Expression Web und mit dem Windows Explorer).</p> <p><code>Einfügen -> Bild -> aus Datei</code></p> <p>oder</p> <p><code>Symbolleiste „Allgemein“ -> Bild aus Datei einfügen</code></p> <h2>Bild formatieren</h2> <p><code>Bild auswählen -> Format -> Eigenschaften</code></p> <p>oder</p> <p><code>Rechte Maustaste auf Bild -> Bildeigenschaften</code></p> <h2>Einstellung der Vorschaugröße</h2> <p><code>Extras -> Seiteneditoroptionen -> Autominiaturansicht</code></p> <h2>Anwendung</h2> <p><code>Rechtsklick auf Bild -> Automatische Miniaturansicht</code></p> <h2>Bilder am Text ausrichten</h2> <p>Es gibt fünf Möglichkeiten, ein Bild zu positionieren:</p> <ul> <li>als Buchstabe mit Text verschoben</li> <li>Linksbündig</li> <li>Rechtsbündig</li> <li>im Positionsrahmen über oder unter dem Text</li> <li>als Hintergrundbild</li> </ul> <h2>Bilder bearbeiten</h2> <p>Über die Bilder-Symbolleiste kann man einfache Bildbearbeitungen durchführen: Drehen, Spiegeln, Kontrast, Helligkeit, Zuschneiden, Transparenz, Abschrägung, Hotspots, Thumb</p> <h2>Mehrere Bilder einfügen</h2> <p>Um mehrere Bilder in einem Raster einzufügen, benötigt man eine Tabelle. Man fügt die Tabelle ein und in jede Zelle ein Bild.</p> <h2>Tabelleneigenschaften festlegen</h2> <p>Jetzt muss man die Tabelle noch anpassen, damit die Bilder zusammenrücken.</p> <p><code>Tabelle markieren -> rechte Maustaste -> Tabelleneigenschaften</code></p> <p>Breite angeben wegklicken.</p> <p>Zelleneigenschaften festlegen</p> <p><code>Zelle markieren -> rechte Maustaste -> Zelleneigenschaften</code> <br/><code>Horizontale Ausrichtung -> Zentriert</code> <br /><code>Vertikale Ausrichtung -> Mitte</code> </p> <p>Damit wird sichergestellt, dass hoch- und querformatige Bilder immer in der Mitte einer Tabellenzelle angeordnet werden.</p> <h2>Bilderordnung</h2> <p>Vorzugsweise speichert man die Bilder in einen Ordner, zum Beispiel „images“. Sind es mehr, dann eben in weiteren Unterverzeichnissen.</p> <p>Wenn man diesen Ordner in Expression Web anlegt und dann die bereits im Wurzelverzeichnis importierten Bilder in diesen Ordner kopiert, ändert Expression Web in allen Dateien, in denen diese Bilder referenziert sind den Pfad.</p> <h2>Lightbox</h2> <p>Die so eingefügten Bilder sind „klassisch“ formatiert. Moderne CSS-Techniken verbunden mit JavaScript erlauben eine ansprechendere Bildverwaltung. Sehr verbreitet ist das kostenlose Paket „Lighbox“ von Lokesh Dhakar. Der Vorteil von Lightbox ist vors allem, dass zur Ansicht eines einzelnen Bildes nicht das das ganze Hauptfenster neu aufgebaut werden muss.</p> <p>Lightbox benötigt die drei Ordner css, images und js. Weiters muss eine Datei, die LightBox verwendet die Dateien in diesen Ordnern referenzieren, indem folgende Zeilen im Header-Teil einer Datei angelegt werden:</p> <mod:inline runat="server" ID="ModInline1" Mode="high" Extension=".xml" Text= '<script src="js/jquery-1.7.2.min.js" type="text/javascript"></<script> <script src="js/lightbox.js" type="text/javascript"></script> <link href="css/lightbox.css" rel="stylesheet" /> <link href="css/screen.css" rel="stylesheet" />' /> <p>Um ein Bild einzufügen, verwendet man das Konstrukt</p> <mod:inline runat="server" ID="Inline1" Mode="high" Extension=".xml" Text= '<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>' /> <p>Um mehrere zusammengehörige Bilder einzufügen, verwendet man einen Albumnamen als Zusatz, zum Beispiel “[landschaften]”:</p> <mod:inline runat="server" ID="Inline2" Mode="high" Extension=".xml" Text= '<a href="images/image-1.jpg" rel="lightbox[landschaften]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[landschaften]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[landschaften]">image #3</a>' /> <p>Dieser gemeinsame Begriff verbindet diese Bilder zu einem Album. Wenn man in diesen durch einen Namen verbundenen Bildern eines der Bilder anklickt, kann man mit Links-Rechts-Navigation durch das Album scrollen.</p> <p>Wenn man seine Bilder einmal mit Lightbox formatiert hat, wird man diesen Komfort nicht mehr missen wollen.</p> <h2>Ergänzende Literatur</h2> <ul> <li> <asp:HyperLink ID="HyperLink1" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://lokeshdhakar.com/projects/lightbox/"></asp:HyperLink> LightBox http://lokeshdhakar.com/projects/lightbox/ </li> <li> <asp:HyperLink ID="HyperLink2" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://lokeshdhakar.com/projects/lightbox2/"></asp:HyperLink> LightBox2 http://lokeshdhakar.com/projects/lightbox2/ </li> <li> <asp:HyperLink ID="HyperLink3" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://www.html-seminar.de/bildergalerie-mit-lightbox.htm"></asp:HyperLink> Bildergalerie mit Lightbox erstellen http://www.html-seminar.de/bildergalerie-mit-lightbox.htm </li> <li> <asp:HyperLink ID="HyperLink4" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://shozam.com/"></asp:HyperLink> Shozam Web Gallery Generator ($24,95) http://shozam.com/ </li> <li> <asp:HyperLink ID="HyperLink5" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://www.coffeecup.com/photo-gallery/"></asp:HyperLink> Coffee Cup Photo Gallery ($23,-) http://www.coffeecup.com/photo-gallery/ </li> <li> <asp:HyperLink ID="HyperLink6" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://topics.udm4.com/photo_gallery_in_expression_web/"></asp:HyperLink> Viele Galerien http://topics.udm4.com/photo_gallery_in_expression_web/ </li> <li> <asp:HyperLink ID="HyperLink7" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://ajaxphotoalbum.com/"></asp:HyperLink> PhotoAlbum http://ajaxphotoalbum.com/ </li> </ul> </asp:Content>